<template>
  <div id="three">

  </div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
  data() {
    return {

    }
  },
  mounted() {
    const scene = new THREE.Scene()
    console.log(scene)
    // 创建一个正方形
    const geometry = new THREE.BoxGeometry(100, 100, 100)
    // 设置正方形的颜色
    const material = new THREE.MeshLambertMaterial({
      color: '#00a4ff',
      opacity: 0.5,
      transparent: true
    })
    // 创建一个网络模型
    const mesh = new THREE.Mesh(geometry, material)
    // 创建一个线模型
    // const mesh = new THREE.Line(geometry, material)
    // 修改网络模型颜色
    mesh.material.color.set('red')
    scene.add(mesh)
    // 设置图形阴影
    mesh.castShadow = true
    // 创建一个圆形
    // const geometry1 = new THREE.SphereGeometry(50, 40, 40)
    const geometry1 = new THREE.BoxGeometry(50, 40, 40)
    // geometry1.faces.pop()//删除一个三角
    // const material1 = new THREE.MeshLambertMaterial({
    //   color: '#00a4ff',
    //   opacity: 0.6
    // })
    const material1 = new THREE.MeshPhongMaterial({
      transparent: true,
      opacity: 0.1,
      side: THREE.DoubleSide// 双面可见
    })
    const mesh1 = new THREE.Mesh(geometry1, material1)
    mesh1.translateX(150)
    scene.add(mesh1)
    // 设置位置
    mesh.position.set(0, 0, 0)
    // 添加一个环境光
    const ambient = new THREE.AmbientLight(0xffffff, 0.5)
    scene.add(ambient)
    // 添加一个点光源
    const pointLight = new THREE.PointLight(0xffffff, 0.4)
    pointLight.position.set(400, 400, 400)
    scene.add(pointLight)
    // 设置坐标轴
    // const axesHelper = new THREE.AxesHelper(150)
    // scene.add(axesHelper)
    // 创建一个相机
    const width = 800
    const height = 500
    const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
    camera.position.set(200, 200, 200)
    camera.lookAt(0, 0, 0)
    // 创建一个webgl渲染器
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(width, height) // 设置渲染区域尺寸
    renderer.setClearColor('#ffffff', 1)// 设置背景颜色
    renderer.render(scene, camera)
    // document.body.appendChild(renderer.domElement)
    document.getElementById('three').appendChild(renderer.domElement)
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.addEventListener('change', function() {
      renderer.render(scene, camera)
    })
    function render() {
      mesh.rotateY(0.01)
      mesh1.rotateX(0.01)
      renderer.render(scene, camera)
      requestAnimationFrame(render)
    }
    render()
  }
}
</script>
<style lang="less" scoped>
#three {
  width: 800px;
  height: 600px;
}
</style>
